<template>
  <header>
    <span @click="handleClick(!toggleSidebar)"> <app-svg-icon icon-class="menu"></app-svg-icon> {{title}}</span>
    <span class="fill-remaining-space"></span>
    <el-switch v-model="toggleTheme" active-text="黑色主题"></el-switch>
  </header>
</template>
<script lang="ts">
import { Component, Vue, Emit } from "vue-property-decorator";
@Component({})
export default class AppHeader extends Vue {
  directives: any = {
    showSideBar: {}
  };

  title: string = "VCL318";
  toggleSidebar: boolean = false;
  toggleTheme: boolean = false;

  @Emit("toggle-sidebar")
  handleClick(condition: boolean) {
    this.toggleSidebar = condition;
  }
}
</script>
<style lang="scss">
header {
  padding: 0 10px;
  min-height: 60px;
  display: flex;
  align-items: center;
  box-shadow: 0 0 2px #cccccc;
  .fill-remaining-space {
    flex: 1;
  }
}
</style>

